<%-- 
    Document   : agregarReserva
    Created on : 27-dic-2011, 20:54:14
    Author     : Administrador
--%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <div id="bodydiv">
            <span style="color: #0395CC; margin-top: 20px; font-size: 20pt; font-family: Arial;"><b>Agregar Reserva</b></span>
            <hr />
            <br />
            <form action="agregarReserva" id="form">
                <%--Seccion Cines--%>
                <c:choose>
                    <c:when test="${not empty sessionScope.cineSeleccionado}">
                        <table>
                            <tr>
                                <td style="font-size: 14px;"><b>Cine -></b></td>
                                <td style="font-size: 14px;">${sessionScope.cineSeleccionado.nombre}</td>
                                <td>&nbsp;&nbsp;&nbsp;</td>
                                <td><a href="listarCines" style="color:#0395CC; text-decoration:none">Cambiar de cine</a>
                            </tr>
                        </table>
                    </c:when>
                    <c:otherwise>
                        <c:if test="${not empty sessionScope.cines}">
                            <br />
                            <br />
                            <table>
                                <tr>
                                    <td colspan="4">Seleccione un cine</td>
                                </tr>
                                <tr>
                                    <td>&nbsp;</td>
                                </tr>
                                <tr>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td style="width: 200px; background:#a52a2a; color: #FFFFFF; border: 1px solid #444444; text-align: center;"><b>Nombre</b></td>
                                    <td style="width: 240px; background:#a52a2a; color: #FFFFFF; border: 1px solid #444444; text-align: center;"><b>Direccion</b></td>
                                    <td style="width: 200px; background:#a52a2a; color: #FFFFFF; border: 1px solid #444444; text-align: center;"><b>Ciudad</b></td>
                                    <td style="width: 240px; background:#a52a2a; color: #FFFFFF; border: 1px solid #444444; text-align: center;"><b>Encargado</b></td>
                                    <td style="width: 140px; background:#a52a2a; color: #FFFFFF; border: 1px solid #444444; text-align: center;"><b>Seleccione</b></td>
                                </tr>
                                <c:forEach var="cine" items="${sessionScope.cines}">
                                    <tr>
                                        <td>${cine.nombre}</td>
                                        <td>${cine.direccion}</td>
                                        <td>${cine.ciudad}</td>
                                        <td>${cine.encargado}</td>
                                        <td><a href="reservaCineSeleccionado?idCine=${cine.id}" style="color:#0395CC; text-decoration:none">seleccionar</a>
                                    </tr>
                                </c:forEach>
                            </table>
                        </c:if>
                    </c:otherwise>
                </c:choose>

                <%--Seccion peliculas--%>
                <c:choose>
                    <c:when test="${not empty sessionScope.peliculaSeleccionada}">
                        <table>
                            <tr>
                                <td style="font-size: 14px;"><b>Pelicula -></b></td>
                                <td style="font-size: 14px;">${sessionScope.peliculaSeleccionada.nombre}</td>
                                <td>&nbsp;&nbsp;&nbsp;</td>
                                <td><a href="reservaCineSeleccionado?idCine=${sessionScope.cineSeleccionado.id}" style="color:#0395CC; text-decoration:none">Cambiar pelicula</a>
                            </tr>
                        </table>
                    </c:when>
                    <c:otherwise>
                        <c:if test="${not empty sessionScope.peliculas}">
                            <hr />
                            <br />
                            <br />
                            <table>
                                <tr>
                                    <td colspan=" 4"><b>Seleccione una pelicula </b></td>
                                </tr>
                                <tr>
                                    <td>&nbsp;</td>
                                </tr>
                                <tr>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td style="width: 200px; background:#a52a2a; color: #FFFFFF; border: 1px solid #444444; text-align: center;"><b>Nombre</b></td>
                                    <td style="width: 200px; background:#a52a2a; color: #FFFFFF; border: 1px solid #444444; text-align: center;"><b>Fecha estreno</b></td>
                                    <td style="width: 200px; background:#a52a2a; color: #FFFFFF; border: 1px solid #444444; text-align: center;"><b>Proyeccion</b></td>
                                    <td style="width: 200px; background:#a52a2a; color: #FFFFFF; border: 1px solid #444444; text-align: center;"><b>Idioma</b></td>
                                    <td style="width: 200px; background:#a52a2a; color: #FFFFFF; border: 1px solid #444444; text-align: center;"><b>Seleccione</b></td>
                                </tr>
                                <c:forEach var="pelicula" items="${sessionScope.peliculas}">
                                    <tr>
                                        <td>${pelicula.nombre}</td>
                                        <td><fmt:formatDate value="${pelicula.fechaEstreno}" dateStyle="medium" pattern="dd/MM/yyyy"/></td>
                                        <td>${pelicula.tipoProyeccion}</td>
                                        <td>${pelicula.idioma}</td>
                                        <td><a href="reservaPeliculaSeleccionada?idPelicula=${pelicula.id}" style="color:#0395CC; text-decoration:none">seleccionar</a></td>
                                    </tr>
                                </c:forEach>
                            </table>
                        </c:if>
                    </c:otherwise>
                </c:choose>
                <%--Seccion funciones--%>
                <c:choose>
                    <c:when test="${not empty sessionScope.funcionSeleccionada}">
                        <table>
                            <tr>
                                <td style="font-size: 14px;"><b>Funcion -></b></td>
                                <td style="font-size: 14px;"><fmt:formatDate value="${funcionSeleccionada.fecha}" dateStyle="medium" pattern="dd/MM/yyyy hh:mm"></fmt:formatDate>  ${sessionScope.funcionSeleccionada.duracion} (min)</td>
                                    <td>&nbsp;&nbsp;&nbsp;</td>
                                    <td><a href="reservaPeliculaSeleccionada?idPelicula=${sessionScope.peliculaSeleccionada.id}" style="color:#0395CC; text-decoration:none">Cambiar funcion</a>
                            </tr>
                        </table>
                    </c:when>
                    <c:otherwise>
                        <c:if test="${not empty sessionScope.funciones}">
                            <hr />
                            <br />
                            <br />
                            <table>
                                <tr>
                                    <td colspan="2">Seleccione una funcion</td>
                                </tr>
                                <tr>
                                    <td colspan="2">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td style="width: 200px; background:#a52a2a; color: #FFFFFF; border: 1px solid #444444; text-align: center;"><b>Fecha</b></td>
                                    <td style="width: 200px; background:#a52a2a; color: #FFFFFF; border: 1px solid #444444; text-align: center;"><b>Duracion</b></td>
                                    <td style="width: 200px; background:#a52a2a; color: #FFFFFF; border: 1px solid #444444; text-align: center;"><b>Seleccione</b></td>
                                </tr>
                                <c:forEach var="funcion" items="${sessionScope.funciones}">
                                    <tr>
                                        <td><fmt:formatDate value="${funcion.fecha}" dateStyle="medium" pattern="dd/MM/yyyy hh:mm"></fmt:formatDate></td>
                                        <td>${funcion.duracion}</td>
                                        <td><a href="reservaFuncionSeleccionada?idFuncion=${funcion.id}" style="color:#0395CC; text-decoration:none">seleccionar</a></td>
                                    </tr>
                                </c:forEach>
                            </table>
                        </c:if>
                    </c:otherwise>
                </c:choose>
                <c:if test="${not empty sessionScope.funcionSeleccionada}">
                    <hr />
                    <br />
                    <br />
                    <table>
                        <tr>
                            <td>Seleccione la cantidad de entradas (usted podra reservar hasta 4 entradas en total)</td>
                        </tr>
                    </table>
                    <br />

                    <table style="border: 1px solid #666666; margin-left: 5%">
                        <tr>
                            <td><b>Menores de edad</b></td>
                            <td style="width: 20px"></td>
                            <td><input type="text" id="menor" name="menor" value="${sessionScope.menor.cantidad}" style="width: 30px; padding: 2px" maxlength="1" class="required number"/> precio: ${sessionScope.menor.precio}</td>
                        </tr>
                        <tr>
                            <td><b>Mediana edad</b></td>
                            <td style="width: 20px"></td>
                            <td><input type="text" id="normal" name="normal" value="${sessionScope.normal.cantidad}" style="width: 30px; padding: 2px" maxlength="1" class="required number"/> precio: ${sessionScope.normal.precio}</td>
                        </tr>
                        <tr>
                            <td><b>Tercera edad</b></td>
                            <td style="width: 20px"></td>
                            <td><input type="text" id="mayor" name="mayor" value="${sessionScope.mayor.cantidad}"  style="width: 30px; padding: 2px" maxlength="1" class="required number"/> precio: ${sessionScope.normal.precio}</td>
                        </tr>
                    </table>
                </c:if>
                <table>
                    <tr>
                        <td width="360"></td>
                        <td width="400"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>&nbsp
                            <c:if test="${not empty requestScope.error}">
                                <font color="red">${requestScope.error}</font>
                                <c:remove scope="request" var="error" /> 
                            </c:if>
                        </td>
                    </tr>
                    <c:if test="${not empty sessionScope.funcionSeleccionada}">
                        <tr>
                            <td><div id="message" style="color: red"></div></td>
                            <td><input type="submit" id="agregar" value="Agregar" style="width: 150px; padding: 4px"/></td>
                        </tr>
                    </c:if>
                </table>
            </form>
        </div>
        <jsp:include page="index.jsp" />
        <script type="text/javascript">
            $(document).ready(function(){
                
                var total = new Number(0);
                
                //Pregunto si es menor que 5 la cantidad de entradas, 
                //si es verdadero envia el submit, de lo contrario muestra error
                $("#form").submit(function(){
                    if(total > 0 && total <= 4){
                        return true;
                    }else{
                        $("#message").html("<span class='red'>Solo se permite reservar hasta 4 entradas</span>");
                        return false;
                        total=0;
                    }
                });
                
                $("#cbcines").change(function(){
                    location.href = "cineSeleccionado?idCine=" + $("#cbcines").val();
                }); 
                
                //Obtengo la cantidad de entradas pedidas
                $("#agregar").click(function(){
                    var menor = new Number($("#menor").val());
                    var normal = new Number($("#normal").val());
                    var mayor = new Number($("#mayor").val());
                       
                    total = menor+normal+mayor;
                });
               
                $("#fecha").datepicker({ dateFormat: 'dd/mm/yy' });
            
                $("#form").validate();
            })
        </script>
    </body>
</html>
